/* tslint:disable:variable-name */
import * as React from 'react';

export interface CurveProps {
  leftGradFill: string;
  rightGradFill: string;
  id: string;
}

export const EaseInElasticSVG = ({leftGradFill, rightGradFill, id}: CurveProps) => (
  <svg width="100%" height="27px" viewBox="0 0 222 170" preserveAspectRatio="none">
    <defs>
      <linearGradient x1="98.721091%" y1="100%" x2="0%" y2="100%" id={`ElasticCurveGradient-3-${id}`}>
        <stop stopColor={rightGradFill} offset="0%" />
        <stop stopColor={leftGradFill} offset="100%" />
      </linearGradient>
    </defs>
    <g id="Timeline" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" opacity="0.429">
      <path d="M0,111.164803 C13.8522167,110.369512 23.3587807,109.893375 28.5196919,109.736392 C36.2610589,109.500918 60.03847,113.436423 64.5045597,113.441124 C68.9706495,113.445825 79.4338169,106.025115 86.6953588,106.070043 C93.9569007,106.114972 107.074729,117.001299 118.693371,117.001299 C130.312013,117.001299 132.417228,111.188913 133.109369,109.736392 C133.80151,108.283871 143.232842,75.3033776 152.950092,75.3033776 C162.667341,75.3033776 167.57645,105.49195 168.338206,109.736392 C169.099962,113.980834 172.980988,169.746279 185.65249,169.746279 C198.323992,169.746279 201.543129,117.123312 201.682306,111.164803 C201.821484,105.206295 202.735138,0.0853545359 221.840088,0 C221.846782,0.00794091991 221.846782,37.0628753 221.840088,111.164803 L0,111.164803 Z" id="Path-29-Copy" fill={`url(#ElasticCurveGradient-3-${id})`} />
    </g>
  </svg>
);

export const EaseInOutElasticSVG = ({leftGradFill, rightGradFill, id}: CurveProps) => (
  <svg width="100%" height="27px" viewBox="0 0 444 170" preserveAspectRatio="none">
    <defs>
      <linearGradient x1="98.721091%" y1="100%" x2="0%" y2="100%" id={`ElasticCurveGradient-2-${id}`}>
        <stop stopColor={rightGradFill} offset="0%" />
        <stop stopColor={leftGradFill} offset="100%" />
      </linearGradient>
    </defs>
    <g id="Timeline" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" opacity="0.429">
      <path d="M221.80504,0.000274590879 C202.73402,0.213954443 201.821398,105.20994 201.682306,111.164803 C201.543129,117.123312 198.323992,169.746279 185.65249,169.746279 C172.980988,169.746279 169.099962,113.980834 168.338206,109.736392 C167.57645,105.49195 162.667341,75.3033776 152.950092,75.3033776 C143.232842,75.3033776 133.80151,108.283871 133.109369,109.736392 C132.417228,111.188913 130.312013,117.001299 118.693371,117.001299 C107.074729,117.001299 93.9569007,106.114972 86.6953588,106.070043 C79.4338169,106.025115 68.9706495,113.445825 64.5045597,113.441124 C60.03847,113.436423 36.2610589,109.500918 28.5196919,109.736392 C23.3587807,109.893375 13.8522167,110.369512 0,111.164803 L221.822579,111.164803 L443.645157,111.164803 C429.792941,110.369512 420.286377,109.893375 415.125465,109.736392 C407.384099,109.500918 383.606687,113.436423 379.140598,113.441124 C374.674508,113.445825 364.211341,106.025115 356.949799,106.070043 C349.688257,106.114972 336.570428,117.001299 324.951786,117.001299 C313.333144,117.001299 311.227929,111.188913 310.535788,109.736392 C309.843647,108.283871 300.412315,75.3033776 290.695065,75.3033776 C280.977816,75.3033776 276.068708,105.49195 275.306952,109.736392 C274.545195,113.980834 270.664169,169.746279 257.992668,169.746279 C245.321166,169.746279 242.102028,117.123312 241.962851,111.164803 C241.823759,105.20994 240.911137,0.213954443 221.840117,0.000274590879 C221.840108,0.000103189987 221.840098,1.16597092e-05 221.840088,0 C221.83425,2.60826492e-05 221.828413,6.19734382e-05 221.822579,0.00010766654 C221.816744,6.19734382e-05 221.810908,2.60826492e-05 221.80507,0 C221.80506,1.16597092e-05 221.80505,0.000103189986 221.80504,0.000274590832 Z" id="Combined-Shape" fill={`url(#ElasticCurveGradient-2-${id})`} />
    </g>
  </svg>
);

export const EaseOutElasticSVG = ({leftGradFill, rightGradFill, id}: CurveProps) => (
  <svg width="100%" height="27px" viewBox="0 0 222 170" preserveAspectRatio="none">
    <defs>
      <linearGradient x1="98.721091%" y1="100%" x2="0%" y2="100%" id={`ElasticCurveGradient-1-${id}`}>
        <stop stopColor={leftGradFill} offset="0%" />
        <stop stopColor={rightGradFill} offset="100%" />
      </linearGradient>
    </defs>
    <g id="Timeline" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" opacity="0.429">
      <path d="M0,111.164803 C13.8522167,110.369512 23.3587807,109.893375 28.5196919,109.736392 C36.2610589,109.500918 60.03847,113.436423 64.5045597,113.441124 C68.9706495,113.445825 79.4338169,106.025115 86.6953588,106.070043 C93.9569007,106.114972 107.074729,117.001299 118.693371,117.001299 C130.312013,117.001299 132.417228,111.188913 133.109369,109.736392 C133.80151,108.283871 143.232842,75.3033776 152.950092,75.3033776 C162.667341,75.3033776 167.57645,105.49195 168.338206,109.736392 C169.099962,113.980834 172.980988,169.746279 185.65249,169.746279 C198.323992,169.746279 201.543129,117.123312 201.682306,111.164803 C201.821484,105.206295 202.735138,0.0853545359 221.840088,0 C221.846782,0.00794091991 221.846782,37.0628753 221.840088,111.164803 L0,111.164803 Z" id="Path-29-Copy-2" fill={`url(#ElasticCurveGradient-1-${id})`} transform="translate(110.922554, 84.873140) scale(-1, 1) translate(-110.922554, -84.873140) " />
    </g>
  </svg>
);

export const EaseInBounceSVG = ({leftGradFill, rightGradFill, id}: CurveProps) => (
  <svg width="100%" height="24px" viewBox="0 0 233 122" preserveAspectRatio="none">
    <defs>
      <linearGradient x1="98.721091%" y1="100%" x2="0%" y2="100%" id={`BounceCurveGradient-1-${id}`}>
        <stop stopColor={rightGradFill} offset="0%" />
        <stop stopColor={leftGradFill} offset="100%" />
      </linearGradient>
    </defs>
    <g id="Timeline" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" opacity="0.429">
      <path d="M0,91.3427205 L0,85.2100913 C7.86757312,88.5881381 15.1629204,93.0975186 21.8860419,98.7382328 C21.9424136,98.7176695 21.9424136,90.5033573 21.8860419,74.0952962 C36.909274,84.5892936 50.8660531,94.9448436 63.756379,105.161946 C63.7865148,105.151665 63.8015827,88.5496706 63.8015827,55.3559645 C89.7765616,75.2587157 117.716178,97.2032565 147.620433,121.189587 C147.565834,121.165478 147.565834,80.7689494 147.620433,-1.8189894e-12 C181.18875,28.8880784 209.471947,59.3433362 232.470023,91.3657732 C232.470244,91.3523291 154.980237,91.3446449 0,91.3427205 Z" id="Path-28-Copy-2" fill={`url(#BounceCurveGradient-1-${id})`} />
    </g>
  </svg>
);

export const EaseInOutBounceSVG = ({leftGradFill, rightGradFill, id}: CurveProps) => (
  <svg width="100%" height="24px" viewBox="0 0 465 122" preserveAspectRatio="none">
    <defs>
      <linearGradient x1="98.721091%" y1="100%" x2="0%" y2="100%" id={`BounceCurveGradient-2-${id}`}>
        <stop stopColor={rightGradFill} offset="0%" />
        <stop stopColor={leftGradFill} offset="100%" />
      </linearGradient>
    </defs>
    <g id="Timeline" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" opacity="0.429">
      <path d="M232.235011,91.0388546 C209.279357,59.1360404 181.074498,28.7897555 147.620433,-1.8189894e-12 C147.565834,80.7689494 147.565834,121.165478 147.620433,121.189587 C117.716178,97.2032565 89.7765616,75.2587157 63.8015827,55.3559645 C63.8015827,88.5496706 63.7865148,105.151665 63.756379,105.161946 C50.8660531,94.9448436 36.909274,84.5892936 21.8860419,74.0952962 C21.9424136,90.5033573 21.9424136,98.7176695 21.8860419,98.7382328 C15.1629204,93.0975186 7.86757312,88.5881381 0,85.2100913 L0,91.3427205 C148.020782,91.3445585 225.354541,91.3516506 232.001276,91.363997 C231.999993,91.3653458 232.07833,91.3649241 232.235011,91.3645083 C232.391692,91.3649241 232.47003,91.3653458 232.470023,91.3657732 C239.115482,91.3516506 316.44924,91.3445585 464.470023,91.3427205 L464.470023,85.2100913 C456.602449,88.5881381 449.307102,93.0975186 442.583981,98.7382328 C442.527609,98.7176695 442.527609,90.5033573 442.583981,74.0952962 C427.560748,84.5892936 413.603969,94.9448436 400.713643,105.161946 C400.683508,105.151665 400.66844,88.5496706 400.66844,55.3559645 C374.693461,75.2587157 346.753844,97.2032565 316.84959,121.189587 C316.904189,121.165478 316.904189,80.7689494 316.84959,-1.8189894e-12 C283.395525,28.7897555 255.190665,59.1360404 232.235011,91.0388546 Z" id="Combined-Shape" fill={`url(#BounceCurveGradient-2-${id})`} />
    </g>
  </svg>
);

export const EaseOutBounceSVG = ({leftGradFill, rightGradFill, id}: CurveProps) => (
  <svg width="100%" height="24px" viewBox="0 0 233 122" preserveAspectRatio="none">
    <defs>
      <linearGradient x1="98.721091%" y1="100%" x2="0%" y2="100%" id={`BounceCurveGradient-3-${id}`}>
        <stop stopColor={leftGradFill} offset="0%" />
        <stop stopColor={rightGradFill} offset="100%" />
      </linearGradient>
    </defs>
    <g id="Timeline" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" opacity="0.429">
      <path d="M0,91.3427205 L0,85.2100913 C7.86757312,88.5881381 15.1629204,93.0975186 21.8860419,98.7382328 C21.9424136,98.7176695 21.9424136,90.5033573 21.8860419,74.0952962 C36.909274,84.5892936 50.8660531,94.9448436 63.756379,105.161946 C63.7865148,105.151665 63.8015827,88.5496706 63.8015827,55.3559645 C89.7765616,75.2587157 117.716178,97.2032565 147.620433,121.189587 C147.565834,121.165478 147.565834,80.7689494 147.620433,-1.8189894e-12 C181.18875,28.8880784 209.471947,59.3433362 232.470023,91.3657732 C232.470244,91.3523291 154.980237,91.3446449 0,91.3427205 Z" id="Path-28-Copy" fill={`url(#BounceCurveGradient-3-${id})`} transform="translate(116.235011, 60.594794) scale(-1, 1) translate(-116.235011, -60.594794) " />
    </g>
  </svg>
);
